<style rel="stylesheet/scss" lang="scss" scoped>
.save {
  padding-top: 20px;
  text-align: right;
}
</style>
<template>
  <div>
    <el-col :span="7" style='margin-top:15px;margin-right:10px'>
      <el-card class="box-card">
        <div class="filter-container">
          <el-input placeholder="请输入" v-model="filterText"></el-input>
        </div>
        <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all highlight-current node-key="id" :filter-node-method="filterNode" @node-click="getNodeData" ref="treeData" :expand-on-click-node="false">
        </el-tree>
      </el-card>
    </el-col>
    <el-col :span="16" style='margin-top:15px;margin-left:5px; width:68.5%'>
      <el-card class="box-card">
        <template>
          <div>
            <upload-file v-if="!disable" @getFiles="getFiles" :files="fileList"></upload-file>
            <el-table :data="fileList" list="" border highlight-current-row style="width: 100%;margin-top:20px">
              <el-table-column width="80px" align="center" label="序号" prop="$index">
                <template slot-scope="scope">
                  {{scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="文档编号" prop="documentNo"></el-table-column>
              <el-table-column align="center" label="文件名" prop="fileName"></el-table-column>
              <!-- <el-table-column align="center" label="文件类型" prop="fileType"></el-table-column> -->
              <el-table-column align="center" label="文件大小">
                <template slot-scope="scope">
                  {{scope.row.fileSize | showSize}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="上传日期" prop="createTime"></el-table-column>
              <el-table-column width="200px" align="center" label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" @click="download(scope.row.fileUrl)">下载</el-button>
                  <el-button v-if="!disable" size="small" type="danger" @click="del(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="save">
              <el-button size="small" type="primary" @click="update()">保存</el-button>
            </div>
          </div>
        </template>
      </el-card>
    </el-col>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import * as api from '@/api/product/pcc/index';

export default {
  components: {

  },
  props: {
    category: {
      type: String, // 1 型号pgf 2 型号qa-doc 3货号pgf
      default: null
    }
  },
  data() {
    return {
      baseUrl: process.env.BASE_FILE_URL,
      disable: false,
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      nodeId: null,
      fileList: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.treeData.filter(val);
    }
  },
  created() {
    this.refresh()
  },
  activated() {
    this.refresh();
  },
  computed: {
    ...mapGetters(['elements'])
  },
  methods: {
    refresh() {
      this.nodeId = null;
      this.fileList = [];
      this.disable = false;
      this.getTreeList();
    },
    // 过滤左侧树节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 获取左侧树结构
    getTreeList() {
      api.getdirectorytree({ docCategoryId: this.category }).then(response => {
        this.treeData = response.data;
        console.log(response.data);
      });
    },
    getNodeData() {
      // debugger
      const node = this.$refs.treeData.getCurrentNode();
      if (this.nodeId === node.id.toString()) {
        return
      }
      this.nodeId = node.id.toString();
      this.fileList = []
      api
        .getfilelist({
          id: node.id,
          typeId: this.$route.query.modelPbsId
        })
        .then(response => {
          response.data.forEach(item => {
            item.file.documentNo = item.documentNo;
            item.file.docDirectoryId = item.docDirectoryId;
            item.file.typeId = item.typeId;
            this.fileList.push(item.file);
          });
        });
    },
    getFiles(value) {
      this.fileList = value;
    },
    download(url) {
      window.open(this.baseUrl + '/' + url);
    },
    del(index) {
      this.$confirm('是否确认删除该文件？', '提示', {
        type: 'warning'
      }).then(() => {
        this.fileList.splice(index, 1);
        // this.$message({
        //   type: 'success',
        //   message: '删除成功!'
        // });
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // });
      });
    },
    update() {
      const updateParams = {}
      updateParams.docDirectoryId = this.nodeId
      updateParams.typeId = this.$route.query.modelPbsId
      this.fileList.forEach(item => {
        delete item.status
      })
      updateParams.eipFile = this.fileList
      api.updateFile(updateParams).then(res => {
        if (res.data === 200) {
          this.$message.success('保存成功！')
        }
      })
    }
  }
};
</script>
